import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {Form,Table,Tooltip, Popconfirm, Button, InputNumber, Modal } from 'antd';
import styles from '../../../components/goods/goodsType/index.less';
import AttributeEdit from '../../../components/goods/attribute/AttributeEdit';
import {message} from "antd/lib/index";

@connect(state => ({
    rule: state.attribute
}))
@Form.create()
class GoodsAttr extends PureComponent {

    state = {
        visible: false,
        editType: 'add',
        record: {},
    };

    componentDidMount() {
        const cat_id = this.props.cat_id;
        const {dispatch} = this.props;
        dispatch({
            type: 'attribute/fetch',
            payload: {cat_id:cat_id},
        });
    }

    handleTableChange = (pagination, record) => {
        const {dispatch} = this.props;
        const cat_id = this.props.cat_id;
        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            cat_id: cat_id
        };

        dispatch({
            type: 'attribute/fetch',
            payload: params,
        });
    }

    handleAddAttr = () => {
        this.handleModalVisible(true);
        this.setState({
            editType: 'add',
        });
    }

    handleModalVisible = (flag) => {
        this.setState({
            visible: !!flag,
        });
    }
    handleModalSuccess = (pagination) => {
        const {dispatch} = this.props;
        const cat_id = this.props.cat_id;
        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            cat_id: cat_id
        };
        dispatch({
            type: 'attribute/fetch',
            payload: params,
        });
    }
    handleEditRow = (record, pagination) => {
        this.handleModalVisible(true);
        this.setState({
            editType: 'mod',
            record: record
        });
    }
    handleDelRow = (attr_id,pagination) => {
        const {dispatch} = this.props;
        dispatch({
            type: 'attribute/del',
            payload: {attr_id: attr_id},
            callback: (response) => {
                if (response.result === 0) {
                    message.success('删除成功');
                    this.handleModalSuccess(pagination);
                } else {
                    message.success('删除失败');
                }
            }
        });
    }
    render() {
        const {visible, editType, record} = this.state;
        const {rule: {loading: ruleLoading, data: {list, pagination}},cat_id, cat_name} = this.props;
        const expandedColumns = [
            {title: '属性名称', dataIndex: 'attr_name',key:'attr_name',
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.attr_name}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {title: '属性值', dataIndex: 'attr_value',key:'attr_value',
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.attr_value}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {title: '编辑类型', dataIndex: 'attr_input_type',key:'attr_input_type',
                render: (val, record) => {
                    return <Tooltip placement="right" title={val === 0 ? '手动输入' : val === 1 ? '选择输入' : '多行文本输入' }>
                        <span>{val === 0 ? '手动输入' : val === 1 ? '选择输入' : '多行文本输入' }</span>
                    </Tooltip>
                }
            },
            {title: '是否多选', dataIndex: 'attr_type',key:'attr_type',
                render: (val, record) => {
                    return <Tooltip placement="right" title={val === 1 ? '是' : '否'}>
                        <span>{val === 1 ? '是' : '否'}</span>
                    </Tooltip>
                }
            },
            {title: '是否可以检索', dataIndex: 'attr_index',key:'attr_index',
                render: (val, record) => {
                    return <Tooltip placement="right" title={val === 0 ? '不需要检索' : val === 1 ? '关键字检索' : '范围检索'}>
                        <span>{val === 0 ? '不需要检索' : val === 1 ? '关键字检索' : '范围检索'}</span>
                    </Tooltip>
                }
            },
            {title: '属性显示的顺序', dataIndex: 'sort_order',key:'sort_order',
                render: (val, record) => {
                    return (
                        <InputNumber min={1} max={100} defaultValue={val} value={val} size={3}/>
                    )
                }
            },
            {title: '是否关联', dataIndex: 'is_linked',key:'is_linked',
                render: (val, record) => {
                    return <Tooltip placement="right" title={val === 1 ? '关联' : '不关联'}>
                        <span>{val === 1 ? '关联' : '不关联'}</span>
                    </Tooltip>
                }
            },
            {
                title: '操作',
                render: (val, record) => (
                    <p>
                        <a href="javascript:" onClick={() => this.handleEditRow(record)}>编辑</a>
                        <span className={styles.splitLine}/>
                        <Popconfirm title="是否确定删除?将同时删除该属性的所有属性值" onConfirm={() => this.handleDelRow(record.attr_id,pagination)} >
                            <a href="#">删除</a>
                        </Popconfirm>
                    </p>
                ),
            },
        ]

        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            ...pagination,
        };

        return (
            <div className={styles.standardTable}>
                <div className={styles.tableListOperator}>

                    <Button icon="plus" type="primary" onClick={() => this.handleAddAttr()}>新增属性</Button>
                </div>
                <Table
                    loading={ruleLoading}
                    rowKey={record => record.attr_id}
                    dataSource={list}
                    columns={expandedColumns}
                    pagination={paginationProps}
                    onChange={this.handleTableChange}
                    // scroll={{x: 2800}}
                />
                <Modal
                    title="新增商品属性"
                    key={new Date()}
                    visible={visible}
                    onOk={this.handleAdd}
                    onCancel={() => this.handleModalVisible()}
                    footer={null}
                >
                    <AttributeEdit
                        ref="attributeEdit"
                        pagination={pagination}
                        editType={editType}
                        record={record}
                        cat_id={cat_id}
                        cat_name={cat_name}
                        handleModalVisible={this.handleModalVisible}
                        handleModalSuccess={this.handleModalSuccess}
                    />
                </Modal>
            </div>
        );
    }
}

export default GoodsAttr;
